<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    v-loading="loading"
    class="container"
    style="font-size: 0.8rem;"
    width="100%"
  >
    <el-table
      :data="value"
      border
      tooltip-effect="dark"
    >
      <el-table-column
        label="订单编号" width="120"
      >
        <template slot-scope="scope">{{ scope.row.sn }}</template>
      </el-table-column>

      <el-table-column
        label="商品信息" width="110">
        <template slot-scope="scope">
          <h-good-info-display v-model="scope.row" :displayInfo="false"></h-good-info-display>
        </template>
      </el-table-column>

      <el-table-column label="商品规格" min-width="100">
        <template slot-scope="scope">
          <h-specs-display v-model="scope.row"></h-specs-display>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="150" prop="createTime" align="center">
      </el-table-column>
      <el-table-column label="订单信息" min-width="200">
        <template slot-scope="scope">
          <h-order-info-display v-model="scope.row"></h-order-info-display>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" min-width="200">
        <template slot-scope="scope">
          <h-order-pay-info-display v-model="scope.row"></h-order-pay-info-display>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="120">
        <template slot-scope="scope">
          <h-order-status-display v-model="scope.row" :pay="true"
                                  :arrival="true" :refund="true"></h-order-status-display>
        </template>
      </el-table-column>
    </el-table>

    <div class="h-form">
      <div class="form-label">
        <span class="red">*</span> 选择退款形式:
      </div>
      <div class="form-content">
        <h-return-type v-model="returnType"></h-return-type>
      </div>
    </div>
    <div v-if="returnType==3" class="h-form">
      <div class="form-label">
        <span class="red">*</span> 退款账户:
      </div>
      <div class="form-content">
        <el-input v-model="account"></el-input>
      </div>
    </div>

    <div v-if="value!=null" slot="footer" style="text-align: center">
      <el-button type="primary" v-loading="loading" @click="doRefound"> 确定申请退款</el-button>
      <el-button @click="closed"> 关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'
  import HUserChoose from 'src/components/common/HUserChoose'
  import HReturnType from 'src/components/common/HReturnType'

  export default {
    name: 'HReturnDialog',
    mixins: [Dialog],
    components: {
      HUserChoose,
      HOrderStatusDisplay,
      HGoodInfoDisplay,
      HSpecsDisplay,
      HOrderInfoDisplay,
      HOrderPayInfoDisplay,
      HReturnType
    },
    data() {
      return {
        loading: false,
        returnType: 3,
        reason: '',
        account: ''
      }
    },
    watch: {
      value: function (c, d) {
        this.returnType = 1
        this.reason = ''
      }
    },
    props: {
      value: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      doRefound: function () {
        const me = this
        const ids = me.value.map(d => {
          return d.id
        })
        const data = {
          ids: ids,
          type: this.returnType,
          note: '',
          account: this.account
        }
        this.loading = true
        FrontService.refund(data).then(d => {
          if (d != null) {
            me.$message.success('申请退款成功!')
            me.$emit('success', me.datas)
          } else {
            me.$message.error('申请退款失败!')
          }
          setTimeout(function () {
            me.loading = false
          }, 1000)
        })
      }
    }
  }
</script>
